<template>
  <div id="app">
    <img src="./assets/logo.png">
    <div>
    </div>
    <router-link to="/" class="router">Go to Index</router-link>
    <router-link to="/foo" class="router">Go to foo</router-link>
    <router-link to="/bar" class="router">Go to bar</router-link>
    <transition :name="transition">
       <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import 'animate.css';
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'app',
  data(){
    return{
      transition:'slideInLeft'
    }
  },
  mounted(){
    // console.log(this.$store)
  },
  watch:{
   '$route'(to,from){
       this.transition = to.meta > from.meta? 'slideInRight' : 'slideInLeft';
   }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.router{
  display: block;
}

.slideInRight-transition,
.slideInLeft-transition {
  transition: all 3s ease-in-out;
}
/* 进入时的状态，从右开始 */
.slideInRight-enter,
.slideInLeft-leave-active {
  transform: translateX(100%);
}
/* 离开时的状态，向左移动 */
.slideInRight-leave-active,
.slideInLeft-enter{
  transform: translateX(-100%);
}
</style>
